<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<style type="text/css">
		/*		
			animation-name:动画名字 必填
            animation-duration: 动画完成时间 必填 
			animation-iteration-count:播放次数 n(n>=1) infinite 无限播放;
			animation-timing-function:动画播放速度 
					linear 匀速;
					ease:默认 由慢到快再到慢
					ease-in: 以低速开始
					ease-out：以低速结束
					ease-in-out：以低速开始和低俗结束
			animation-delay: 动画开始前得延迟时间
			animation-direction:动画播放方向
					 reverse 反向;
					 alternate 正去反回
					 normal 正常
			animation-fill-mode:动画不播放的时候显示的样式 
					 backwards第一帧
					 forwards最后一帧
			animation-play-state:设置动画运行或暂停 
					 paused 暂停;
					 running运行
			综合写法： 注意 第一个时间是动画完成的时间 第二个是延长时间
			animation: goudan 5s infinite linear 1s reverse backwards;
		    */
		div{
			width:200px ;
			height: 200px;
			background: red;
			animation-name: goudan;
			animation-duration: 0.1s;
			animation-iteration-count: infinite;
			animation-timing-function: ease;
			animation-delay: 2s;
			animation-direction: alternate;
			animation-fill-mode: forwards;
/*			animation: goudan 5s infinite linear 1s reverse backwards;*/

		}
		div:hover{
			animation-play-state: paused;
		}




     /*	注册关键帧动画 @keyframes  + 名字	*/
     @keyframes goudan {
     	0%{
     		width: 200px;

     	}
     	20%{
     		width: 100px;
     	}
     	40%^{
     		width: 400px;
     	}
     	60%{
     		background: pink;
     	}
     	80%{
     		background: yellowgreen;
     	}
     	100%{
     		width: 150px;
     		background: yellow;
     	}
     }
      @keyframes run{
/*      0%	*/
		from{
			width: 200px;
		}
       /*	100%	*/
       to{
       	width: 600px;
       }
      }
	</style>
</head>
<body>
	<div></div>
</body>
</html>